<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>多快好省，购物上京东！</title>
  <link rel="shortcut icon" href="./favicon.ico">
  <link rel="stylesheet" href="./css/base.css">
  <link rel="stylesheet" href="./css/index.css">
</head>

<body>
  <!-- 顶部广告 -->
  <div class="top-ad">
    <div class="ad-cancel"></div>
    <div class="logo"></div>
    <div class="ad-txt">
      <span class="txt-up">打开京东APP</span><br>
      <span class="txt-down">购物实惠又轻松</span>
    </div>
    <div class="link-app">
      立即打开
    </div>

    <!-- 立即打开的广告 -->
    <div class="mask-ad">
      <!-- 第一个 -->
      <div class="mask-link">
        <div class="mask-logo">
          <img src="./images/logo.png">
        </div>
        <p>此功能需访问京东APP<br>
          正在为您打开...</p>
      </div>
      <!-- 第二个 -->
      <div class="mask-link-load">
        <p>此功能需访问京东APP</p>
        <div class="download">
          <span class="continue">继续逛逛</span>
          <span class="download-App">下载京东APP</span>
        </div>
        <div class="mask-bottom">
          <span>开发者:北京京东世纪贸易有限公司 | 版本:10.3.4<br>更新时间:2022-01-25 应用权限与隐私政策信息:<a href="javascript:;">点击查看</a></span>
        </div>
      </div>
    </div>
  </div>

  <!-- 头部区域 -->
  <header class="header">
    <div class="hd-bg">
      <img src="./images/bg.PNG">
    </div>
    <div class="hd-top">
      <div class="top-classify"></div>
      <div class="top-search">
        <div class="sm-logo"></div>
        <div class="fdj"></div>
        <input type="text" placeholder="机械键盘">
      </div>
      <div class="top-login">登录</div>
    </div>
    <div class="hd-banner">
      <ul>
        <li><img src="./images/banner08.JPEG"></li>
        <li><img src="./images/banner01.JPEG"></li>
        <li><img src="./images/banner02.JPEG"></li>
        <li><img src="./images/banner03.JPEG"></li>
        <li><img src="./images/banner04.JPG"></li>
        <li><img src="./images/banner05.JPEG"></li>
        <li><img src="./images/banner06.JPEG"></li>
        <li><img src="./images/banner07.JPEG"></li>
        <li><img src="./images/banner08.JPEG"></li>
        <li><img src="./images/banner01.JPEG"></li>
      </ul>
      <ol class="banner-circle">
        <li class="current"></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
      </ol>
    </div>
  </header>

  <!-- 中心区域 -->
  <div class="main">
    <!-- 活动商品 -->
    <div class="active-goods">
      <!-- 左盒子 -->
      <div class="active-box">
        <div class="goods-l">
          <img src="./images/goods-sm-l.PNG" alt="" class="goods-sm-l">
        </div>
        <img src="./images/bg-sm-l.PNG" alt="">
        <span>第二件0元</span>
      </div>
      <!-- 中盒子 -->
      <div class="active-box">
        <div class="goods-cl">
          <img src="./images/goods-sm-c1.JPEG" alt="" class="goods-sm-ca">
        </div>
        <div class="goods-cr">
          <img src="./images/goods-sm-c2.JPEG" alt="" class="goods-sm-cb">
        </div>
        <img src="./images/bg-sm-c.GIF" alt="">
      </div>
      <!-- 右盒子 -->
      <div class="active-box">
        <div class="goods-r">
          <img src="./images/goods-sm-r.JPEG" alt="" class="goods-sm-r">
        </div>
        <img src="./images/bg-sm-r.PNG" alt="">
        <span>居家好年货</span>
      </div>
    </div>

    <!-- 功能分类 -->
    <div class="classify-box">
      <!-- 功能列表 -->
      <ul class="classify-list">
        <!-- 第一页 -->
        <li>
          <ul class="first-list">
            <li>
              <img src="./images/classify01.PNG">
              <span>京东超市</span>
            </li>
            <li>
              <img src="./images/classify02.PNG">
              <span>数码电器</span>
            </li>
            <li>
              <img src="./images/classify03.PNG">
              <span>京东服饰</span>
            </li>
            <li>
              <img src="./images/classify04.PNG">
              <span>京东生鲜</span>
            </li>
            <li>
              <img src="./images/classify05.PNG">
              <span>京东到家</span>
            </li>
            <li>
              <img src="./images/classify06.PNG">
              <span>充值缴费</span>
            </li>
            <li>
              <img src="./images/classify07.PNG">
              <span>物流查询</span>
            </li>
            <li>
              <img src="./images/classify08.PNG">
              <span>领券</span>
            </li>
            <li>
              <img src="./images/classify09.PNG">
              <span>领津贴</span>
            </li>
            <li>
              <img src="./images/classify10.PNG">
              <span>PLUS会员</span>
            </li>
          </ul>
        </li>
        <!-- 第二页 -->
        <li>
          <ul class="last-list">
            <li>
              <img src="./images/classify11.PNG">
              <span>京东国际</span>
            </li>
            <li>
              <img src="./images/classify12.PNG">
              <span>京东拍卖</span>
            </li>
            <li>
              <img src="./images/classify13.PNG">
              <span>看病购药</span>
            </li>
            <li>
              <img src="./images/classify14.PNG">
              <span>玩3C</span>
            </li>
            <li>
              <img src="./images/classify15.PNG">
              <span>沃尔玛</span>
            </li>
            <li>
              <img src="./images/classify16.PNG">
              <span>美妆馆</span>
            </li>
            <li>
              <img src="./images/classify17.PNG">
              <span>京东旅行</span>
            </li>
            <li>
              <img src="./images/classify18.PNG">
              <span>拍拍二手</span>
            </li>
            <li>
              <img src="./images/classify19.PNG">
              <span>潮燃青年</span>
            </li>
            <li>
              <img src="./images/classify20.PNG">
              <span>全部</span>
            </li>
          </ul>
        </li>
      </ul>
      <!-- 分页器 -->
      <ol id="classify-circle">
        <li class="current"></li>
        <li></li>
      </ol>
    </div>

    <!-- 京东秒杀 -->
    <div class="seckill">
      <div class="seckill-top">
        <p>京东秒杀</p>
        <div class="seckill-nth">
          <i>00</i>
          <img src="./images/limit-time.PNG" alt="">
        </div>
        <div class="seckill-time">
          <span>11</span>:<span>22</span>:<span>33</span>
        </div>
        <div class="more">
          更多秒杀
          <img src="./images/limit-more.PNG" alt="">
        </div>
      </div>
      <div class="seckill-goods">
        <ul>
          <li>
            <img src="./images/limit-goods01.JPEG">
            <p>
              <em>¥</em>
              <span>1</span>
            </p>
          </li>
          <li>
            <img src="./images/limit-goods02.JPEG">
            <p>
              <em>¥</em>
              <span>99.99</span>
            </p>
          </li>
          <li>
            <img src="./images/limit-goods03.JPEG">
            <p>
              <em>¥</em>
              <span>19.8</span>
            </p>
          </li>
          <li>
            <img src="./images/limit-goods04.JPEG">
            <p>
              <em>¥</em>
              <span>29.9</span>
            </p>
          </li>
          <li>
            <img src="./images/limit-goods05.JPEG">
            <p>
              <em>¥</em>
              <span>4999</span>
            </p>
          </li>
          <li>
            <img src="./images/limit-goods06.JPEG">
            <p>
              <em>¥</em>
              <span>299</span>
            </p>
          </li>
        </ul>
      </div>
    </div>

    <!-- 商品展示 -->
    <div class="goods-list">
      <ul class="left-list">
        <li>
          <div class="pic">
            <img src="./images/goods-computer.webp" alt="">
          </div>
          <div class="info">
            <p>惠普（HP）战99 15.6英寸高性能笔记本设计师本工作站（i7-11800H/32G/1TSSD/T600独显/高色域/IR/1年上门）</p>
            <div class="price">￥<em>10299</em>.00</div>
            <div class="good-bottom">
              <span>1万+条评论</span>
              <div class="similar">看相似</div>
            </div>
          </div>
        </li>
        <li>
          <div class="pic">
            <img src="./images/goods-cookies.webp" alt="">
          </div>
          <div class="info">
            <p><i></i> 三只松鼠蔓越莓曲奇 饼干网红儿童零食早餐食品点心薄脆饼干100g/袋</p>
            <div class="price">￥<em>16</em>.90</div>
            <div class="good-bottom">
              <div class="self-support">
                <img src="./images/self-support.png" alt="">
              </div>
              <span>5万+条评论</span>
              <div class="similar">看相似</div>
            </div>
          </div>
        </li>
        <li>
          <div class="pic">
            <img src="./images/goods-light.webp" alt="">
          </div>
          <div class="info">
            <p>萧萧布落客厅灯 简约现代大气家用LED吸顶灯圆形创意温馨卧室大厅套餐灯具 直径50cm 内暖外白(单色)</p>
            <div class="price">￥<em>461</em>.00</div>
            <div class="good-bottom">
              <span>100%好评率</span>
              <div class="similar">看相似</div>
            </div>
          </div>
        </li>
      </ul>
      <ul class="right-list">
        <li>
          <div class="pic">
            <img src="./images/goods-whiteSpirit.webp" alt="">
          </div>
          <div class="info">
            <p>洋河蓝色经典 海之蓝 42度 新年白酒礼盒装 480ml*2瓶白酒 口感绵柔浓香型（新老包装随机发放）</p>
            <div class="hot">大家都在买的热销商品</div>
            <div class="price">
              ￥<em>339</em>.00
              <span>每满300-40</span>
            </div>
            <div class="good-bottom">
              <span>20万+条评论</span>
              <div class="similar">看相似</div>
            </div>
          </div>
        </li>
        <li>
          <div class="pic">
            <img src="./images/goods-pad.webp" alt="">
          </div>
          <div class="info">
            <p>【春节送货】12G三星高清大屏平板电脑十核14英寸2021新款超薄全网5G二合一ipad学习办公品拜 土豪金512G（免费试用+分期免息+鼠标蓝牙键盘） 14英寸全网通5G wifi旗舰至尊高配版</p>
            <div class="price">
              ￥<em>1688</em>.00
            </div>
            <div class="good-bottom">
              <span>1万+条评论</span>
              <div class="similar">看相似</div>
            </div>
          </div>
        </li>
        <li>
          <div class="pic">
            <img src="./images/goods-steak.webp" alt="">
          </div>
          <div class="info">
            <p><i></i> <em></em> 华牧鲜 加拿大进口AAA级原切雪花眼肉牛排套餐 厚切200g/份 谷饲安格斯牛肉生鲜 年货送礼 AAA级牛排8片装 1.6kg</p>
            <div class="price">
              ￥<em>288</em>.00
              <span>每满300-40</span>
            </div>
            <div class="good-bottom">
              <span>10万+条评论</span>
              <div class="similar">看相似</div>
            </div>
          </div>
        </li>
      </ul>
    </div>

    <!-- 底部公共样式 -->
    <div class="common-footer">
      <div class="common-links">
        <ul>
          <li>登录</li>
          <li>注册</li>
          <li>客户服务</li>
          <li class="backTop">返回顶部</li>
        </ul>
      </div>
      <div class="common-icons">
        <ul>
          <li>
            <img src="./images/clients.png" alt="">
          </li>
          <li>
            <img src="./images/international.png" alt="">
          </li>
          <li>
            <img src="./images/pc.png" alt="">
          </li>
        </ul>
      </div>
      <div class="copyright">
        Copyright © 2004-2020 京东JD.com 版权所有
      </div>
    </div>

    <!-- 返回顶部 -->
    <div class="backTop" id="backTop">
    </div>
  </div>

  <!-- 初始广告 -->
  <div class="big-ad">
    <div class="ad-pic">
      <img src="./images/big-ad.webp" alt="">
      <div class="big-cancel"></div>
    </div>
  </div>

  <!-- 底部广告 -->
  <div class="small-ad">
    <div class="small-cancel"></div>
    <div class="ad-txt">
      <ul id="ad-txt">
        <li>打开京东APP</li>
        <li>购物更轻松</li>
        <li>打开京东APP</li>
      </ul>
    </div>
  </div>

  <!-- 底部区域 -->
  <footer>
    <div class="footer-index">
      <img src="./images/bottom-index.PNG">
    </div>
    <div class="footer-classify">
      <img src="./images/bottom-classify.PNG" alt="">
    </div>
    <div class="footer-suprise">
      <img src="./images/bottom-suprise.PNG" alt="">
    </div>
    <div class="footer-car">
      <img src="./images/bottom-car.PNG" alt="">
    </div>
    <div class="footer-login">
      <img src="./images/bottom-login.PNG" alt="">
    </div>
  </footer>


  <script src="./js/jquery.min.js"></script>
  <script src="./js/index.js"></script>
</body>

</html>